/**
 * rn-drawer example app
 * https://github.com/facebook/react-native
 */
import React, { Component } from 'react';
import {
  AppRegistry,
    StyleSheet,
  Text,
  View,
    Navigator,
    Platform,
    ScrollView,
    TouchableOpacity,
    TextInput,
    Image,
    Animated,
    ListView,
    Alert,
} from 'react-native';
var BaseDetail = require('./BaseDetail');//详情界面
var Dimensions = require('Dimensions'); //Dimensions
var screenWidth = Dimensions.get('window').width; //屏宽
var screenHeight = Dimensions.get('window').height;//屏高
var NavigatorBar = require('../Main/NXNavigationBar'); //NavigationBar
var ChooseCell = require('./ChooseCell');//筛选的cell
var WineJson = require('./Wine.json');//香型数据源
var WineJson1 = require('./Wine1.json');//年份数据源
var ary = WineJson;//香型数据源
var ary1 = WineJson1;//年份数据源
var ds = new ListView.DataSource({rowHasChanged:(r1,r2) => r1!==r2});
var ds1 = new ListView.DataSource({rowHasChanged:(r1,r2) => r1!==r2});
var array = [];
var array1 = [];
var arrayAll = [];
export class Basecotrol extends Component {
    constructor(props){
        super(props)
        this.icons = { //Step 2
            'up' : require('../image/up.png'),
            'down' : require('../image/down.png')
        };
        this.state = { //Step 3
            expanded : true,
            expanded1 : true,
            animation : new Animated.Value(),
            animation1 : new Animated.Value(),
            dataSource:ds.cloneWithRows(ary),
            dataSource1:ds1.cloneWithRows(ary1),
        };
    }
    componentWillMount(){
        //对数据源进行判断,来确定初始高度
        if(ary.length == 0){
            this.state.animation.setValue()
        }else {
            this.state.animation.setValue(70)
        }
        if(ary1.length == 0){
            this.state.animation1.setValue()
        }else {
            this.state.animation1.setValue(70)
        }
        this.setState({
            expanded:false,
            expanded1:false,
        })
    }
    //香型折叠事件
    toggle= ()=>{
        const { expanded , animation,maxHeight,minHeight } = this.state
        //根据数据源计算行数
        if(ary.length == 0){
            this.state.maxHeight = 0;
            this.state.minHeight = 30
        }else{
            if(ary.length%3 != 0){
                this.state.maxHeight = (parseInt(ary.length/3) + 1)*50 +30;
                this.state.minHeight = 70

            }else {
                this.state.maxHeight = (ary.length/3)*50 +30;
                this.state.minHeight = 70
            }
        }
        let initialValue = this.state.expanded? this.state.maxHeight : this.state.minHeight ,
            finalValue = this.state.expanded? this.state.minHeight  : this.state.maxHeight ;
        this.setState({
            expanded : !this.state.expanded ,//Step 2修改图片
        });
        this.state.animation.setValue(initialValue); //Step 3启动动画
        Animated.timing( //Step 4
            this.state.animation,
            {
                toValue: finalValue
            }
        ).start();

    }
    //年份折叠事件
    toggle1= ()=>{
        const { expanded1 , animation1,maxHeight1,minHeight1 } = this.state
        //根据数据源计算行数
        if(ary1.length == 0){
            this.state.maxHeight1 = 0;
            this.state.minHeight1 = 30
        }else{
            if(ary1.length%3 != 0){
                this.state.maxHeight1 = (parseInt(ary1.length/3) + 1)*50 + 30;
                this.state.minHeight1 = 70
            }else {
                this.state.maxHeight1 = (ary1.length/3)*50+30;
                this.state.minHeight1 = 70
            }
        }
        let initialValue = this.state.expanded1? this.state.maxHeight1: this.state.minHeight1 ,
            finalValue = this.state.expanded1? this.state.minHeight1  : this.state.maxHeight1 ;
        this.setState({
            expanded1 : !this.state.expanded1 ,//Step 2改变图片
        });
        this.state.animation1.setValue(initialValue); //Step 3启动动画
        Animated.timing( //Step 4
            this.state.animation1,
            {
                toValue: finalValue
            }
        ).start();

    }
    render() {
        const { expanded, animation,expanded1 } = this.state
        //设置默认的图片即向下
        let icon = this.icons['down']
        let icon1 = this.icons['down']
        if(this.state.expanded){
            icon = this.icons['up']
        }
        if(this.state.expanded1){
            icon1 = this.icons['up']
        }
      return(
      <View style={styles.container}>
          <ScrollView
              showsVerticalScrollIndicator={false}
              style={{backgroundColor:'white',height:screenHeight}}
          >
            <View style={{borderBottomWidth:1,borderBottomColor:'black'}}>
                <View style={{height:50}}>
                    {/*价格区间*/}
                    <Text style={{marginTop:25,fontSize:20,marginLeft:10}}>
                        价格区间(元)
                    </Text>
                </View>
                <View style={{flexDirection:'row',height:40,marginTop:10}}>
                    {/*最低价*/}
                    <TextInput
                        style={{width:screenWidth/3,backgroundColor:'#b2b3b4',textAlign:'center',marginLeft:10}}
                        placeholder='最低价'
                        keyboardType={'numeric'}
                    ></TextInput>
                    {/*分割线*/}
                    <View style={{height:1,width:10,backgroundColor:'black',marginTop:20,marginLeft:10}}></View>
                    {/*最高价*/}
                    <TextInput
                        style={{width:screenWidth/3,backgroundColor:'#b2b3b4',textAlign:'center',marginLeft:10}}
                        placeholder='最高价'
                        keyboardType={'numeric'}
                    ></TextInput>
                </View>
            </View>
              {/*香型,年份,基酒等级*/}
              {/*香型部分的动态view*/}
              <Animated.View style={[styles.animatedStyle,{height: this.state.animation}]}>
                  <View>
                      <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                          <View style={{marginTop:8,marginLeft:10,flex:1}}>
                              <Text>
                                  香型
                              </Text>
                          </View>
                          <TouchableOpacity onPress={()=>this.toggle()}>
                              <Image source={icon} style={{marginRight:8,marginTop:8}}/>
                          </TouchableOpacity>
                      </View>
                  </View>
                  <View>
                      {/*香型的listview*/}
                      <ListView
                          contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',alignItems:'flex-start',width:screenWidth*4/5}}
                          dataSource = {this.state.dataSource}
                          renderRow = {this.typeRow.bind(this)}
                          scrollEnabled = {false}
                          showsVerticalScrollIndicator ={false}
                      >
                      </ListView>
                  </View>
              </Animated.View>
              {/*年份部分的动态view*/}
              <Animated.View style={[styles.animatedStyle,{height: this.state.animation1}]}>
                  <View>
                      <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                          <View style={{marginTop:8,marginLeft:10,flex:1}}>
                              <Text>
                                  年份
                              </Text>
                          </View>
                          <TouchableOpacity onPress={()=>this.toggle1()}>
                              <Image source={icon1} style={{marginRight:8,marginTop:8}}/>
                          </TouchableOpacity>
                      </View>
                  </View>
                  <View>
                      {/*年份的listview*/}
                      <ListView
                          contentContainerStyle={{flexDirection:'row',flexWrap:'wrap',alignItems:'flex-start',width:screenWidth*4/5}}
                          dataSource = {this.state.dataSource1}
                          renderRow= {this.yearRow.bind(this)}
                          scrollEnabled = {false}
                          showsVerticalScrollIndicator ={false}
                      >
                      </ListView>
                  </View>
              </Animated.View>

          </ScrollView>
          <View style={{flexDirection:'row',height:44,justifyContent: 'space-between',}}>
              <View style={{backgroundColor:'#b2b3b4',}}>
                  <TouchableOpacity onPress={() => this.resetAction()}>
                      <Text style={{fontSize:20,marginTop:12,width:screenWidth*2/5,height:44,textAlign:'center',color:'#0c7aff'}}>
                          重置
                      </Text>
                  </TouchableOpacity>
              </View>
              <View style={{backgroundColor:'#0c7aff',}}>
                  <TouchableOpacity onPress={() => this.affirmAction()}>
                      <Text style={{fontSize:20,marginTop:12,width:screenWidth*2/5,height:44,textAlign:'center',color:'white'}}>
                          确认
                      </Text>
                  </TouchableOpacity>
              </View>
          </View>
      </View>
      );
  }
    typeRow(rowData,sectionID,rowID){
        return(
            <TouchableOpacity style={styles.row} onPress={() => this.clickTypeCell(rowData,sectionID,rowID)}>
                <View style={[styles.row,{backgroundColor:rowData.color}]}>
                    <Text>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    yearRow(rowData,sectionID,rowID){
        return(
            <TouchableOpacity style={styles.row} onPress={() => this.clickYearCell(rowData,sectionID,rowID)}>
                <View style={[styles.row,{backgroundColor:rowData.color,}]}>
                    <Text>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }
    clickTypeCell(rowData,sectionID,rowID){

        ary[rowID]['color'] =  ary[rowID]['color'] == '#0c7aff' ? '#b2b3b4' : '#0c7aff'
        this.setState({
            dataSource:ds.cloneWithRows(ary),

        })
    }
    clickYearCell(rowData,sectionID,rowID){
        ary1[rowID]['color'] =  ary1[rowID]['color'] == '#0c7aff' ? '#b2b3b4' : '#0c7aff'
        this.setState({
            dataSource1:ds1.cloneWithRows(ary1),
        })

    }
  //重置按钮点击事件
    resetAction(){

      for(var i = 0;i<ary.length;i++){
          if(ary[i]['color']=="#0c7aff"){
              ary[i]['color'] = '#b2b3b4'
          }
      }
        for(var i = 0;i<ary1.length;i++){
            if(ary1[i]['color']=="#0c7aff"){
                ary1[i]['color'] = '#b2b3b4'
            }
        }
        this.setState({
            dataSource:ds.cloneWithRows(ary),
            dataSource1:ds1.cloneWithRows(ary1)
        })

  }
  //确认按钮点击事件
    affirmAction(){
        //香型选中的条件
        for(var i = 0;i<ary.length;i++){
            if(ary[i]['color']=="#0c7aff"){
                array.push(ary[i]['name'])
                ary[i]['color'] = '#b2b3b4'
            }
        }
        //香型没有选,默认全选
        if(array.length == 0){
            for(var i = 0;i<ary.length;i++){
                array.push(ary[i]['name'])
            }
        }
        //年份选中的条件
        for(var i = 0;i<ary1.length;i++){
            if(ary1[i]['color']=="#0c7aff"){
                array1.push(ary1[i]['name'])
                ary1[i]['color'] = '#b2b3b4'
            }
        }
        //年份没选,默认全选
        if(array1.length == 0){
            for(var i = 0;i<ary1.length;i++){
                array1.push(ary1[i]['name'])
            }
        }
        //将两个数组合成一个数组
        Array.prototype.push.apply(array, array1)
        //将筛选条件传到Base界面
        global.dataAry = array
        //清空数组
        array=[]
        array1=[]
        this.setState({
            dataSource:ds.cloneWithRows(ary),
            dataSource1:ds1.cloneWithRows(ary1)
        })
        //关闭侧滑
       this.props.colse()
        //筛选的条件传到base
       this.props.requestData()
    }
};


var styles = StyleSheet.create({
    container: {
        flex:1
    },
    animatedStyle: {
        flex:1,
        overflow:'hidden',
        borderBottomWidth:1,
        borderBottomColor:'black'
    },
    row:{
        width:screenWidth/5,
        height:30,
        marginTop:10,
        marginLeft:15,
        marginBottom:10,
        justifyContent:'center',
        alignItems:'center'
    }

});

module.exports = Basecotrol;
AppRegistry.registerComponent('Basecotrol', () => Basecotrol);

